<template>
  <div class='home'>
    <home-head></home-head>

    <!-- <van-notice-bar
      mode='closeable'
      color='#1989fa'
      background='#ecf9ff'
      left-icon='info-o'
    >
      本项目仅用于测试,谢谢大家伙捧场!.......................
    </van-notice-bar> -->

    <hy-swiper keys="home"></hy-swiper>

    <hy-category></hy-category>

    <div class="mei" v-if="swipelist">
      <div class="new">
        <!-- <div><img :src="newimg" />
        </div> -->
        <mei-item :i="index" v-for="(item, index) in meiListNew.events" :key="'new'+item.eventId" :obj="item"></mei-item>
      </div>
      <div class="hot">
        <!-- <div><img :src="hotimg" /> -->
        <!-- </div> -->
        <mei-item :i="index" v-for="(item, index) in meiListHot.events" :key="'new'+item.eventId" :obj="item"></mei-item>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import { mapState, mapActions, mapGetters } from 'vuex'
import Vue from 'vue'
import { NoticeBar, Search } from 'vant'
Vue.use(NoticeBar).use(Search)
import HomeHead from '@/components/home/HomeHead'
import HySwiper from '@/components/home/HySwiper.vue'
import HyCategory from '@/components/home/HyCategory.vue'
import MeiItem from '@/components/MeiItem.vue'

export default {
  components: {
    HomeHead,
    HySwiper,
    HyCategory,
    MeiItem
  },
  data () {
    return {
      // swipelist: null,
      // newimg: require('@/assets/images/new.png'),
      // hotimg: require('@/assets/images/hot.png')
      newimg: '',
      hotimg: '',
      // swipelist: 
    }
  },
  computed: {
    ...mapState('goodsModule', ['meiListNew', 'meiListHot']),
    ...mapGetters('goodsModule', ['swipelist'])
    // getters
  },
  methods: {
    ...mapActions('goodsModule', ['getMeiListAction'])
  },
  mounted () {
    this.getMeiListAction()
  }
}
</script>

<style lang='scss' scoped>
.home {
  margin-bottom: 45px;
  .mei{
    .new,.hot{
      width: 100vw;
      div{
        width: 86vw;
        padding: 4px 7vw;
        img{
          background-color: #bbb; /* 浏览器不支持时显示 */
          background-image: linear-gradient(#e66465, #9198e5);
          // width: 300px;
          // height: 200px;
        }
      }
    }
  }
}
</style>
